<template>
	<view>
		<view class="top">
			<view class="person">
				<view class="person_top">
					<view class="left">
						<view class="iconfont icon-wutouxiang"></view>
						<image :src="userInfo.avatar_url" mode=""></image>
					</view>
					<view class="right">
						<view class="name">游客用户</view>
						<u-tag text="Lv.2会员  >" color="#f2f2f2" size="mini" bgColor="#3A3C3E" type="warning"></u-tag>
					</view>
				</view>
				<view class="person_buttom">
					<view class="item history">
						<view class="number">
							22
						</view>
						<view class="text">
							浏览历史
						</view>
					</view>
					<view class="item follow">
						<view class="number">
							1
						</view>
						<view class="text">
							收藏关注
						</view>
					</view>
					<view class="item discount">
						<view class="number">
							-
						</view>
						<view class="text">
							钱包优惠
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="service">
				<view class="title">
					房产服务
				</view>
				<view class="menu">
					<view class="item">
						<text class="iconfont icon-anquan"></text>
						<text>看房管理</text>
					</view>
					<view class="item">
						<text class="iconfont icon-yulekanfangicon"></text>
						<text>卖房管理</text>
					</view>
					<view class="item">
						<text class="iconfont icon-chucun"></text>
						<text>金融服务</text>
					</view>
				</view>
			</view>
			<view class="line">
				<view class="item" v-for="(item,index) in lineList" :key="index">
					<text>{{item.text}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="outBtn">
			<u-button class="btn" text="退出登录"></u-button>
		</view>
	</view>
</template>

<script>
	import api from '../../utils/api.js'
	export default {
		data() {
			return {
				lineList: [{
					text: '账号设置'
				}, {
					text: '在线客服'
				}, {
					text: '关注公众号'
				}, {
					text: '注销账号'
				}, ],
				userInfo: {}
			}
		},
		onNavigationBarButtonTap: function(e) {
			console.log(JSON.stringify(e))
		},
		methods: {

		},
		created() {
			api.getUserInfo().then(res => {
				console.log(res)
				this.userInfo = res
			})
		}
	}
</script>

<style lang="scss">
	.top {
		height: 160rpx;
		background-color: #60C696;
		margin-bottom: 200rpx;
		position: relative;
	}

	.person {
		background-color: skyblue;
		height: 320rpx;
		width: 80%;
		position: absolute;
		transform: translate(-50%);
		left: 50%;
		box-shadow: 0px 5px 5px 0px #F1F1F1;
		background-color: #fff;

		.person_top {
			display: flex;
			align-items: center;

			.left {
				margin: 20rpx 20rpx;
				width: 150rpx;
				height: 150rpx;
				background-color: #BBE5B1;
				border-radius: 50%;
				overflow: hidden;

				.icon-wutouxiang {
					font-size: 110rpx;
					line-height: 190rpx;
					text-align: center;
					color: #fff;
				}
			}

			.right {
				.name {
					margin-bottom: 10rpx;
					font-weight: bold;
				}
			}
		}

		.person_buttom {
			display: flex;

			.item {
				flex: 1;
				text-align: center;

				.number {
					font-size: 44rpx;
					font-weight: bold;
				}
			}
		}
	}

	.content {
		padding-left: 50rpx;

		.service {
			.title {
				font-size: 40rpx;
				font-weight: bold;
			}

			.menu {
				display: flex;
				padding-top: 20rpx;

				.item {
					width: 170rpx;
					text-align: center;
					display: flex;
					flex-direction: column;
					font-size: 30rpx;

					.iconfont {
						font-size: 50rpx;
						line-height: 80rpx;
					}
				}
			}

		}

		.line {
			padding-top: 30rpx;

			.item {
				display: flex;
				justify-content: space-between;
				font-weight: bold;
				line-height: 60rpx;
				border-bottom: 1px solid #F3F4F6;
				margin-bottom: 20rpx;
			}
		}
	}

	.outBtn {
		.btn {
			width: 400rpx;
			font-weight: bold;
		}
	}
</style>
